<template>
  <div id="accountIden">
    <div class="accountIden-main">
      <div class="accountIden-list">
        <ul>
          <li class="phone-iden">
            <h3>手机认证<img src="#"></h3>
            <span>绑定手机号：</span>
            <span>无</span>
            <el-button type="primary" class="butt-iden" @click="IdenPhone = true">去认证</el-button>
            <el-dialog title="手机认证" :visible.sync="IdenPhone">
              <el-form :model="form">
                <el-form-item label="手机号：" :label-width="formLabelWidth" class="input-iden-phone">
                  <el-input v-model="form.num" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="验证码：" :label-width="formLabelWidth" class="input-iden-check">
                  <el-input v-model="form.check" auto-complete="off" ></el-input>
                </el-form-item>
                <el-button type="primary" id="check-num">获取验证码</el-button>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="modInfo1 = false">取 消</el-button>
                <el-button type="primary" @click="modInfo1 = false">提 交</el-button>
              </div>
            </el-dialog>
          </li>
          <li class="email-iden">
            <h3>邮箱认证<img src="#"></h3>
            <span>绑定邮箱：</span>
            <span>shabilaohuimin@163.com</span>
            <el-button type="primary" class="butt-iden" @click="open">去认证</el-button>
          </li>
          <li class="realname-iden">
            <h3>实名认证<img src="#"></h3>
            <span>未认证</span>
            <el-button type="primary" class="butt-iden" @click="open">去认证</el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'accountIden',
    data(){
      return{
        IdenPhone: false,
        form: {
          num: '',
          check: '',
        },
        formLabelWidth: '120px',
      }
    },
    methods: {
      moodDel(id){
        this.$confirm('永久删除该心情, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var mood=document.getElementById(id);
          mood.parentNode.removeChild(mood);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      phoneIden() {
        this.$prompt('手机号', '手机认证', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '提交成功，等待审核！'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      open() {
        this.$alert('本功能暂未开通', '敬请期待', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `非常抱歉`
            });
          }
        });
      },
    }
  }
</script>

<style scoped>
  #accountIden {
  }
  ul{
    list-style-type: none;
  }
  .phone-iden img,.email-iden img,.realname-iden img{
    position: relative;
    left: 2px;
    top: 4px;
  }
  li{
    padding-bottom: 50px;
    padding-top: 20px;
  }
  li h3{
    font-size: 130%;
  }
  .butt-iden{
    position: absolute;
    left: 580px;
    margin-top: -32px;
  }
  .input-iden-phone{
    width: 420px;
  }
  .input-iden-check{
    width: 300px;
    float: left;
  }
  #check-num{
    margin-left: 20px;
  }

  
</style>